<!--
 * 功能：表格
 * 作者：闫李壮
 * 日期：2024-06-04
-->
<template>
  <div class="table-list-view">
    <transition-table v-if="tableInfo.tableData.length"
                      :data="tableInfo.tableData"
                      :preview="public.tablePre"
                      :columns="tableInfo.header"
                      :table-css="tableCss">
    </transition-table>
    <a-empty v-else/>
  </div>
</template>
<script lang="ts" setup>
import {useRouter} from 'vue-router'
import {onBeforeUnmount, onMounted, reactive, ref} from 'vue';
import {useIntervalFn} from "@vueuse/core";
import useLoading from '@/hooks/loading';
import {getChartInfo} from '@/api/dashboard/api';
import {getTimeObject} from "@/utils/charts";
import TransitionTable from "@/components/transition-table/index.vue";
//加载中
const router = useRouter();

const props = defineProps({
  public: {
    type: Object,
    default: () => {
      return {}
    }
  },
  configType: {
    type: Number,
    default: 1,
  },
  // 设备编号, -------------------------------------------没有timeBar的组件一定要传
  deviceSn: {
    type: String,
    default: ''
  }
})
const {loading, setLoading} = useLoading(false);
const tableCss = {
  columns: {
    color: props.public.tablePre == 1 ? 'var(--color-text-1)' : '#FFFFFF',
    background: 'rgba(52, 144, 227, 0.05)'
  },
  data: {
    color: props.public.tablePre == 1 ? 'var(--color-text-1)' : '#FFFFFF',
    background: 'rgba(52, 144, 227, 0.1)'
  }
}
const tableInfo = reactive<any>({
  cardName: '',
  header: [],
  tableData: []
})
const timeOptions = ref<any>({});

// 5 分钟轮询
const {resume: startInterval, pause: stopInterval} = useIntervalFn(async () => {
  let item: any = {
    id: tableInfo.tableData.length + 1,
    '工单名称': "DI维保",
    '操作': "处理",
    '时间': "2024-07-03 14:51",
    '状态': "已接单",
    '事件': "[D1]电流过低",
    '站点': "红太阳光电",
    '设备': "D1",
    '类别': "电流过低",
    '等级': "一级报警",
  }
  tableInfo.tableData.unshift(item);
}, 20000);


const timeBarChange = async (timer: any) => {
  timeOptions.value = timer;
  await fetchData();
}

const fetchData = async () => {
  if(!props.public.cardKey || !props.public.dashboardConfigId){
    return;
  }
  try {
    setLoading(true);
    const params = {
      configId: props.public.dashboardConfigId,
      cardKey: props.public.cardKey,
      deviceSn: props.public.deviceSn,
      ...getTimeObject(timeOptions.value)
    };
    const res: any = await getChartInfo(params);
    if (res.code === 200 && res.data) {
      tableInfo.cardName = res.data.cardName;
      tableInfo.header = res.data.tableInfo.header;
      tableInfo.tableData = res.data.tableInfo.tableData;
    } else {
      tableInfo.cardName = "";
      tableInfo.header = [];
      tableInfo.tableData = [];
    }
  } catch (error) {
    console.error('获取图表数据时出错:', error);
  } finally {
    setLoading(false);
  }
}
onMounted(() => {
  fetchData();
  startInterval();
})

onBeforeUnmount(() => {
  stopInterval();
})

defineExpose({
  handleTime: (val: any) => {
    timeBarChange(val);
  },
})
</script>
<style lang="less" scoped>
.table-list-view {
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  margin-top: 6px;
}

.arco-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
